<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>婚礼礼簿</title>
  <script src="../css/tailwind3.4.17.css"></script>
  <link href="../css/all.min.css" rel="stylesheet">
  <link href="../css/my-font.css" rel="stylesheet">
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            paper: '#fff8f0',
            ink: '#7d0000',
            accent: '#c41e3a',
            'accent-light': '#f8c0c8',
            'accent-dark': '#9a0018',
            gold: '#d4af37',
            'gold-light': '#f9e49c',
            'gold-dark': '#b8860b'
          },
          fontFamily: {
            calligraphy: ['"Ma Shan Zheng"', 'cursive'],
            classic: ['"Noto Serif SC"', 'serif'],
            title: ['"ZCOOL XiaoWei"', 'serif']
          },
          boxShadow: {
            'book': '0 0 20px rgba(0,0,0,0.3), inset 0 0 30px rgba(0,0,0,0.1)',
            'page': '0 0 15px rgba(0,0,0,0.1)',
            'red': '0 0 15px rgba(196, 30, 58, 0.3)'
          }
        }
      }
    }
  </script>
  
  <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700&family=ZCOOL+XiaoWei&display=swap" rel="stylesheet">
  
  <style type="text/tailwindcss">
    @layer utilities {
      .paper-texture {
        background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23c41e3a' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
      }
      .red-texture {
        background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 10h80v80H10z' fill='%23c41e3a' fill-opacity='0.9'/%3E%3Cpath d='M20 20h60v60H20z' fill='%239a0018' fill-opacity='0.9'/%3E%3Cpath d='M30 30h40v40H30z' fill='%23c41e3a' fill-opacity='0.9'/%3E%3C/svg%3E");
      }
      .gold-pattern {
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.5c3.59 0 6.5 2.91 6.5 6.5s-2.91 6.5-6.5 6.5S3.5 13.59 3.5 10 6.41 3.5 10 3.5zm0 1.5c-2.49 0-4.5 2.01-4.5 4.5s2.01 4.5 4.5 4.5 4.5-2.01 4.5-4.5-2.01-4.5-4.5-4.5zm0 7c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z' fill='%23d4af37' fill-opacity='0.1'/%3E%3C/svg%3E");
      }
      .double-happiness {
        position: relative;
      }
      .double-happiness::before {
        content: '囍';
        position: absolute;
        font-size: 120px;
        color: rgba(196, 30, 58, 0.05);
        top: -40px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 0;
        font-family: 'Ma Shan Zheng', cursive;
      }
      .vertical-text {
        writing-mode: vertical-rl;
        text-orientation: upright;
      }
      .book-page {
        position: relative;
      }
      .book-page::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 20px;
        background: linear-gradient(to right, rgba(196, 30, 58, 0.05), transparent);
      }
      .book-page::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 1px;
        background: linear-gradient(to bottom, transparent, rgba(196, 30, 58, 0.2), transparent);
      }
      .button-vertical {
        writing-mode: vertical-rl;
        text-orientation: mixed;
      }
      .scroll-decoration {
        background-image: url("data:image/svg+xml,%3Csvg width='40' height='100' viewBox='0 0 40 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h40v100H0z' fill='%23c41e3a'/%3E%3Cpath d='M5 5h30v90H5z' fill='%239a0018'/%3E%3Cpath d='M10 10h20v80H10z' fill='%23c41e3a'/%3E%3C/svg%3E");
      }
      .lantern {
        position: relative;
        width: 40px;
        height: 60px;
        background: linear-gradient(to bottom, #ff6b6b, #c41e3a);
        border-radius: 50% 50% 20% 20%;
        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
      }
      .lantern::before {
        content: '';
        position: absolute;
        top: -10px;
        left: 0;
        right: 0;
        height: 20px;
        background: linear-gradient(to bottom, #ffd700, #d4af37);
        border-radius: 50% 50% 0 0;
      }
      .lantern::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 0;
        right: 0;
        height: 10px;
        background: linear-gradient(to bottom, #d4af37, #b8860b);
        border-radius: 0 0 50% 50%;
      }
      .lantern-light {
        position: absolute;
        top: 10px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50% 50% 20% 20%;
      }
      .gift-pattern {
        background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 2C6.13 2 3 5.13 3 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z' fill='%23c41e3a' fill-opacity='0.05'/%3E%3C/svg%3E");
      }
      .entry-row {
        background-image: linear-gradient(to right, transparent 95%, #c41e3a 95%, #c41e3a 100%);
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .page-break {
        page-break-after: always;
      }
      .book-spine {
        width: 20px;
        background: linear-gradient(to right, #8b0000, #b22222, #8b0000);
        box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
      }
      .hidden-buttons {
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      .entry-name, .entry-gift {
        height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .entry-amount {
        height: 320px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }

      .entry-actions {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .entry-item:hover .hidden-buttons {
        opacity: 1;
      }
    }
  </style>
</head>

<body class="flex justify-center">
  <div class="fixed inset-0 z-0 opacity-10 pointer-events-none">
    <div class="absolute top-0 left-0 w-full h-20 bg-gradient-to-b from-accent to-transparent"></div>
    <div class="absolute bottom-0 left-0 w-full h-20 bg-gradient-to-t from-accent to-transparent"></div>
    <div class="absolute top-0 left-0 w-20 h-full bg-gradient-to-r from-accent to-transparent"></div>
    <div class="absolute top-0 right-0 w-20 h-full bg-gradient-to-l from-accent to-transparent"></div>
    
    <div class="absolute top-0 left-0 w-40 h-40">
      <div class="lantern absolute top-0 left-0"></div>
    </div>
    <div class="absolute top-0 right-0 w-40 h-40">
      <div class="lantern absolute top-0 right-0"></div>
    </div>
    <div class="absolute bottom-0 left-0 w-40 h-40">
      <div class="lantern absolute bottom-0 left-0"></div>
    </div>
    <div class="absolute bottom-0 right-0 w-40 h-40">
      <div class="lantern absolute bottom-0 right-0"></div>
    </div>
  </div>

  <div class="book-container relative w-full max-w-8xl flex z-10">
    <div class="book-left w-2/6 bg-paper paper-texture rounded-l-lg shadow-book flex flex-col items-center p-4 md:p-8 border-r border-2 border-accent/30">
      <div class="h-16 bg-accent flex justify-center items-center">
        <div class="w-16 h-16 -mt-8 relative">
          <div class="lantern mx-auto">
            <div class="lantern-light"></div>
            <div class="absolute top-4 left-0 right-0 text-center text-white font-bold">囍</div>
          </div>
        </div>
      </div>
      
      <div class="flex-1 flex flex-col justify-center items-center text-center">
        <div class="text-center mb-6">
          <h3 class="font-calligraphy text-3xl text-accent inline-block px-6 py-2 bg-accent/10 rounded-lg">礼金登记簿</h3>
        </div>
        <div class="mb-8 double-happiness relative z-10">
          <h2 class="font-calligraphy text-4xl text-accent mb-4">恭贺新禧</h2>
          <div class="flex justify-center items-center my-3">
            <div class="h-px bg-accent/30 flex-grow max-w-xs"></div>
            <p id="coupleNames" class="mx-4 font-title text-lg">张明 & 李华 新婚之喜</p>
            <div class="h-px bg-accent/30 flex-grow max-w-xs"></div>
          </div>
          <p id="weddingInfo" class="font-title text-sm text-ink/70 mt-4">公元二零二三年十月一日<br>于福满楼大酒店</p>
        </div>
        
        <div class="w-full bg-accent/5 p-4 rounded-lg border border-accent/20 gold-pattern mt-8">
          <h4 class="font-title text-xl mb-3 text-center">统计信息</h4>
          <div class="flex justify text-left">
            <span class="font-title">宾客总数：</span>
            <span id="totalGuests" class="font-calligraphy text-xl text-accent">0</span>
            <span class="font-title">位</span>
          </div>
          <div class="flex justify text-left">
            <span class="font-title">礼金总额：</span>
            <div>
              <span id="totalAmountUpper" class="font-calligraphy text-xl text-accent">零元</span>
              <div id="totalAmountNumber" class="text-sm text-ink/70">0 元</div>
            </div>
          </div>
          <div class="flex justify text-left">
            <span class="font-title">最大礼金：</span>
            <div>
              <span id="maxAmount" class="font-calligraphy text-xl text-accent">零元</span>
              <div id="maxAmountNumber" class="text-sm text-ink/70">0 元</div>
            </div>
          </div>
          <div class="flex justify-between text-left">
            <span class="font-title">平均礼金：</span>
            <div>
              <span id="averageAmount" class="font-calligraphy text-xl text-accent">零元</span>
              <div id="averageAmountNumber" class="text-sm text-ink/70">0 元</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="book-spine"></div>
    
    <div class="book-right w-4/5 bg-paper paper-texture rounded-r-lg shadow-book flex flex-col relative">
      <div class="h-16 bg-accent flex justify-center items-center">
        <div class="w-16 h-16 -mt-8 relative">
          <div class="lantern mx-auto">
            <div class="lantern-light"></div>
            <div class="absolute top-4 left-0 right-0 text-center text-white font-bold">囍</div>
          </div>
        </div>
      </div>
      
      <div class="flex-1 overflow-y-auto book-page p-4 md:p-8">
        
        <div id="searchContainer" class="max-w-3xl mx-auto mb-4 hidden">
          <div class="flex">
            <input type="text" id="searchInput" placeholder="输入嘉宾姓名搜索..." class="flex-grow p-2 border-2 border-accent/30 rounded-l focus:outline-none focus:ring-2 focus:ring-accent bg-white/80">
            <button id="searchBtn" class="px-4 bg-accent text-white rounded-r hover:bg-accent-dark transition-colors">
              <i class="fa fa-search"></i>
            </button>
            <button id="clearSearchBtn" class="px-4 bg-gray-200 text-gray-700 rounded-l-none hover:bg-gray-300 transition-colors">
              <i class="fa fa-times"></i>
            </button>
          </div>
        </div>
        
        <div class="flex justify-center">
          <div class="w-full max-w-3xl border-2 border-accent/30 rounded-lg overflow-hidden shadow-red">
            <div id="entriesList" class="grid grid-cols-15 gap-px bg-accent/30">
              <div class="col-span-15 flex items-center justify-center py-8 text-center text-ink/60 bg-white/90">
                暂无记录，请点击右侧"添加"按钮开始
              </div>
            </div>
            
            <div id="pagination" class="fixed right-6 bottom-0 hidden">
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="fixed right-6 top-1/2 transform -translate-y-1/2 flex flex-col items-center space-y-6 z-20">
      <div class="scroll-decoration w-12 h-20 rounded flex items-center justify-center shadow-lg">
        <button id="settingsBtn" class="button-vertical text-white font-calligraphy text-xl hover:text-gold-light transition-colors">
          设置
        </button>
      </div>
      
      <div class="scroll-decoration w-12 h-20 rounded flex items-center justify-center shadow-lg">
        <button id="addEntryBtn" class="button-vertical text-white font-calligraphy text-xl hover:text-gold-light transition-colors">
          添加
        </button>
      </div>
      
      <div class="scroll-decoration w-12 h-20 rounded flex items-center justify-center shadow-lg">
        <button id="searchToggleBtn" class="button-vertical text-white font-calligraphy text-xl hover:text-gold-light transition-colors">
          搜索
        </button>
      </div>
      
      <div class="scroll-decoration w-12 h-20 rounded flex items-center justify-center shadow-lg">
        <button id="importBtn" class="button-vertical text-white font-calligraphy text-xl hover:text-gold-light transition-colors">
          导入
        </button>
      </div>
      
      <div class="scroll-decoration w-12 h-20 rounded flex items-center justify-center shadow-lg">
        <button id="exportBtn" class="button-vertical text-white font-calligraphy text-xl hover:text-gold-light transition-colors">
          导出
        </button>
      </div>
    </div>
  </div>

  <div id="entryModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-paper paper-texture rounded-lg shadow-xl w-full max-w-md p-6 relative border-2 border-accent">
      <div class="absolute top-0 left-0 right-0 h-4 bg-accent rounded-t-lg"></div>
      
      <button id="closeModal" class="absolute top-3 right-3 text-ink/70 hover:text-ink">
        <i class="fa fa-times text-xl"></i>
      </button>
      <h3 class="font-calligraphy text-2xl text-accent text-center mb-6 mt-2">添加礼金</h3>
      <form id="entryForm">
        <input type="hidden" id="entryId">
        <div class="mb-6">
          <label class="block text-sm mb-1 font-title">嘉宾姓名 <span class="text-red-500">*</span></label>
          <input type="text" id="guestName" required class="w-full p-3 border-2 border-accent/30 rounded focus:outline-none focus:ring-2 focus:ring-accent bg-white/80 text-lg">
        </div>
        <div class="mb-6">
          <label class="block text-sm mb-1 font-title">礼金金额(元) <span class="text-red-500">*</span></label>
          <div class="flex">
            <input type="number" id="amount" required min="0" class="w-1/2 p-3 border-2 border-accent/30 rounded-l focus:outline-none focus:ring-2 focus:ring-accent bg-white/80 text-lg">
            <div id="amountUpper" class="w-1/2 p-3 bg-accent/10 border-t-2 border-r-2 border-b-2 border-accent/30 rounded-r text-center font-calligraphy text-accent">
              零元
            </div>
          </div>
        </div>
        <div class="flex justify-end space-x-4">
          <button type="button" id="cancelEntry" class="px-6 py-2 border-2 border-accent text-accent rounded hover:bg-accent/5 transition-colors font-title">取消</button>
          <button type="submit" class="px-6 py-2 bg-accent text-white rounded hover:bg-accent-dark transition-colors shadow-md font-title">保存</button>
        </div>
      </form>
    </div>
  </div>

  <div id="settingsModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-paper paper-texture rounded-lg shadow-xl w-full max-w-md p-6 relative border-2 border-accent">
      <div class="absolute top-0 left-0 right-0 h-4 bg-accent rounded-t-lg"></div>
      
      <button id="closeSettingsModal" class="absolute top-3 right-3 text-ink/70 hover:text-ink">
        <i class="fa fa-times text-xl"></i>
      </button>
      <h3 class="font-calligraphy text-2xl text-accent text-center mb-6 mt-2">礼簿设置</h3>
      
      <div class="space-y-6">
        <div class="bg-white/50 rounded-lg p-4 shadow-red">
          <h4 class="font-title text-xl mb-4 border-b border-accent/20 pb-2 text-center">婚礼信息</h4>
          <div class="space-y-4">
            <div>
              <label class="block text-sm mb-1">新郎姓名</label>
              <input type="text" id="groomInput" value="张明" class="w-full p-2 border border-accent/30 rounded focus:outline-none focus:ring-1 focus:ring-accent bg-white/80">
            </div>
            <div>
              <label class="block text-sm mb-1">新娘姓名</label>
              <input type="text" id="brideInput" value="李华" class="w-full p-2 border border-accent/30 rounded focus:outline-none focus:ring-1 focus:ring-accent bg-white/80">
            </div>
            <div>
              <label class="block text-sm mb-1">婚礼日期</label>
              <input type="text" id="dateInput" value="二零二三年十月一日" class="w-full p-2 border border-accent/30 rounded focus:outline-none focus:ring-1 focus:ring-accent bg-white/80">
            </div>
            <div>
              <label class="block text-sm mb-1">婚礼地点</label>
              <input type="text" id="venueInput" value="福满楼大酒店" class="w-full p-2 border border-accent/30 rounded focus:outline-none focus:ring-1 focus:ring-accent bg-white/80">
            </div>
          </div>
        </div>
        
        <div class="bg-white/50 rounded-lg p-4 shadow-red">
          <h4 class="font-title text-xl mb-4 border-b border-accent/20 pb-2 text-center">字体设置</h4>
          <div class="space-y-4">
            <div>
              <label class="block text-sm mb-1">姓名字体</label>
              <select id="nameFontSelect" class="w-full p-2 border border-accent/30 rounded focus:outline-none focus:ring-1 focus:ring-accent bg-white/80">
                <option value="'MyFont-Regular', serif">手写体</option>
                <option value="'MyFont-pen', serif">行书</option>
                <option value="'MyFont-GB2312', serif">钢笔字</option>
                <option value="'MyFont-GB2313', serif">书写体</option>
                <option value="'MyFont-GB2316', serif">繁体字</option>
                <option value="'fangyuan14', serif">草书</option>
              </select>
            </div>
            <div>
              <label class="block text-sm mb-1">金额字体</label>
              <select id="amountFontSelect" class="w-full p-2 border border-accent/30 rounded focus:outline-none focus:ring-1 focus:ring-accent bg-white/80">
                <option value="'MyFont-Regular', serif">手写体</option>
                <option value="'MyFont-pen', serif">行书</option>
                <option value="'MyFont-GB2312', serif">钢笔字</option>
                <option value="'MyFont-GB2313', serif">书写体</option>
                <option value="'MyFont-GB2316', serif">繁体字</option>
                <option value="'fangyuan14', serif">草书</option>
              </select>
            </div>
          </div>
        </div>
        
        <div class="flex justify-end space-x-4">
          <button type="button" id="cancelSettings" class="px-6 py-2 border-2 border-accent text-accent rounded hover:bg-accent/5 transition-colors font-title">取消</button>
          <button id="saveSettings" class="px-6 py-2 bg-accent text-white rounded hover:bg-accent-dark transition-colors shadow-md font-title">保存设置</button>
        </div>
      </div>
    </div>
  </div>

  <div id="confirmModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-paper paper-texture rounded-lg shadow-xl w-full max-w-md p-6 relative border-2 border-accent">
      <div class="absolute top-0 left-0 right-0 h-4 bg-accent rounded-t-lg"></div>
      
      <button id="closeConfirmModal" class="absolute top-3 right-3 text-ink/70 hover:text-ink">
        <i class="fa fa-times text-xl"></i>
      </button>
      <h3 id="confirmTitle" class="font-calligraphy text-2xl text-accent text-center mb-6 mt-2">确认操作</h3>
      <p id="confirmMessage" class="text-center mb-6 font-title">确定要执行此操作吗？</p>
      
      <div class="flex justify-center space-x-4">
        <button id="cancelConfirm" class="px-6 py-2 border-2 border-accent text-accent rounded hover:bg-accent/5 transition-colors font-title">取消</button>
        <button id="confirmAction" class="px-6 py-2 bg-accent text-white rounded hover:bg-accent-dark transition-colors shadow-md font-title">确认</button>
      </div>
    </div>
  </div>

  <div id="alertModal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
    <div class="bg-paper paper-texture rounded-lg shadow-xl w-full max-w-md p-6 relative border-2 border-accent">
      <div class="absolute top-0 left-0 right-0 h-4 bg-accent rounded-t-lg"></div>
      
      <button id="closeAlertModal" class="absolute top-3 right-3 text-ink/70 hover:text-ink">
        <i class="fa fa-times text-xl"></i>
      </button>
      <h3 id="alertTitle" class="font-calligraphy text-2xl text-accent text-center mb-6 mt-2">提示</h3>
      <p id="alertMessage" class="text-center mb-6 font-title">操作完成</p>
      
      <div class="flex justify-center">
        <button id="closeAlert" class="px-6 py-2 bg-accent text-white rounded hover:bg-accent-dark transition-colors shadow-md font-title">确定</button>
      </div>
    </div>
  </div>

  <script>
    let entries = JSON.parse(localStorage.getItem('weddingEntries')) || [];
    let currentId = localStorage.getItem('currentEntryId') || 1;
    let currentPage = 1;
    const entriesPerPage = 10;
    let nameFont = localStorage.getItem('nameFont') || "'MyFont-Regular', serif";
    let amountFont = localStorage.getItem('amountFont') || "'MyFont-Regular', serif";

    const entriesList = document.getElementById('entriesList');
    const pagination = document.getElementById('pagination');
    const entryModal = document.getElementById('entryModal');
    const settingsModal = document.getElementById('settingsModal');
    const confirmModal = document.getElementById('confirmModal');
    const alertModal = document.getElementById('alertModal');
    const addEntryBtn = document.getElementById('addEntryBtn');
    const settingsBtn = document.getElementById('settingsBtn');
    const importBtn = document.getElementById('importBtn');
    const exportBtn = document.getElementById('exportBtn');
    const searchInput = document.getElementById('searchInput');
    const searchBtn = document.getElementById('searchBtn');
    const clearSearchBtn = document.getElementById('clearSearchBtn');
    const searchToggleBtn = document.getElementById('searchToggleBtn');
    const searchContainer = document.getElementById('searchContainer');
    const closeModal = document.getElementById('closeModal');
    const closeSettingsModal = document.getElementById('closeSettingsModal');
    const cancelEntry = document.getElementById('cancelEntry');
    const cancelSettings = document.getElementById('cancelSettings');
    const entryForm = document.getElementById('entryForm');
    const saveSettings = document.getElementById('saveSettings');
    const groomInput = document.getElementById('groomInput');
    const brideInput = document.getElementById('brideInput');
    const dateInput = document.getElementById('dateInput');
    const venueInput = document.getElementById('venueInput');
    const coupleNames = document.getElementById('coupleNames');
    const weddingInfo = document.getElementById('weddingInfo');
    const amountInput = document.getElementById('amount');
    const amountUpper = document.getElementById('amountUpper');
    const nameFontSelect = document.getElementById('nameFontSelect');
    const amountFontSelect = document.getElementById('amountFontSelect');
    
    let searchTerm = '';
    let currentConfirmAction = null;

    document.addEventListener('DOMContentLoaded', () => {
      renderEntries();
      updateTotals();
      loadWeddingSettings();
      
      addEntryBtn.addEventListener('click', openEntryModal);
      settingsBtn.addEventListener('click', openSettingsModal);
      closeModal.addEventListener('click', closeEntryModal);
      closeSettingsModal.addEventListener('click', closeSettingsModalFunc);
      cancelEntry.addEventListener('click', closeEntryModal);
      cancelSettings.addEventListener('click', closeSettingsModalFunc);
      entryForm.addEventListener('submit', saveEntry);
      saveSettings.addEventListener('click', saveWeddingSettings);
      amountInput.addEventListener('input', convertToUpper);
      
      searchBtn.addEventListener('click', performSearch);
      clearSearchBtn.addEventListener('click', clearSearch);
      searchInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
          performSearch();
        }
      });
      
      searchToggleBtn.addEventListener('click', toggleSearch);
      
      importBtn.addEventListener('click', importData);
      exportBtn.addEventListener('click', exportData);
      
      document.getElementById('closeConfirmModal').addEventListener('click', closeConfirmModal);
      document.getElementById('cancelConfirm').addEventListener('click', closeConfirmModal);
      document.getElementById('confirmAction').addEventListener('click', executeConfirmAction);
      
      document.getElementById('closeAlertModal').addEventListener('click', closeAlertModal);
      document.getElementById('closeAlert').addEventListener('click', closeAlertModal);
    });
    
    function performSearch() {
      searchTerm = searchInput.value.trim().toLowerCase();
      currentPage = 1;
      renderEntries();
    }
    
    function clearSearch() {
      searchTerm = '';
      searchInput.value = '';
      currentPage = 1;
      renderEntries();
    }
    
    function toggleSearch() {
      searchContainer.classList.toggle('hidden');
      if (!searchContainer.classList.contains('hidden')) {
        searchInput.focus();
      }
    }
    
    function importData() {
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = '.json';
      
      input.onchange = e => {
        const file = e.target.files[0];
        if (!file) return;
        
        const reader = new FileReader();
        reader.onload = event => {
          try {
            const data = JSON.parse(event.target.result);
            
            if (!data.entries || !Array.isArray(data.entries)) {
              throw new Error('无效的数据格式：缺少entries数组');
            }
            
            entries = data.entries;
            currentId = data.currentId || (entries.length > 0 ? Math.max(...entries.map(e => parseInt(e.id))) + 1 : 1);
            
            if (data.settings) {
              if (data.settings.groom) groomInput.value = data.settings.groom;
              if (data.settings.bride) brideInput.value = data.settings.bride;
              if (data.settings.date) dateInput.value = data.settings.date;
              if (data.settings.venue) venueInput.value = data.settings.venue;
              if (data.settings.nameFont) {
                nameFont = data.settings.nameFont;
                nameFontSelect.value = nameFont;
              }
              if (data.settings.amountFont) {
                amountFont = data.settings.amountFont;
                amountFontSelect.value = amountFont;
              }
              saveWeddingSettings();
            }
            
            localStorage.setItem('weddingEntries', JSON.stringify(entries));
            localStorage.setItem('currentEntryId', currentId);
            
            renderEntries();
            updateTotals();
            
            showAlert('数据导入成功！', '导入成功');
          } catch (error) {
            showAlert('导入失败：' + error.message, '导入失败');
          }
        };
        reader.readAsText(file);
      };
      
      input.click();
    }
    
    function exportData() {
      const now = new Date();
      const timestamp = `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, '0')}${String(now.getDate()).padStart(2, '0')}_${String(now.getHours()).padStart(2, '0')}${String(now.getMinutes()).padStart(2, '0')}${String(now.getSeconds()).padStart(2, '0')}`;
      
      const exportData = {
        entries: entries,
        currentId: currentId,
        settings: {
          groom: groomInput.value,
          bride: brideInput.value,
          date: dateInput.value,
          venue: venueInput.value,
          nameFont: nameFont,
          amountFont: amountFont
        }
      };
      
      const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
      
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `wedding_book_${timestamp}.json`;
      
      document.body.appendChild(a);
      a.click();
      
      setTimeout(() => {
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
      }, 0);
    }

    function numberToChinese(num) {
      if (num === 0) return '零元';
      
      const digits = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
      const units = ['', '拾', '佰', '仟', '万', '拾', '佰', '仟', '亿'];
      
      let str = '';
      let zeroFlag = false;
      let hasValue = false;
      
      const integerPart = Math.floor(num);
      
      if (integerPart > 0) {
        const integerStr = integerPart.toString();
        const length = integerStr.length;
        
        for (let i = 0; i < length; i++) {
          const digit = parseInt(integerStr[i]);
          const pos = length - i - 1;
          
          if (digit === 0) {
            zeroFlag = true;
          } else {
            if (zeroFlag) {
              str += digits[0];
            }
            if (!(digit === 1 && pos === 1 && i === 0)) {
              str += digits[digit];
            }
            str += units[pos];
            zeroFlag = false;
            hasValue = true;
          }
        }
        
        str += '元';
      }
      
      const decimalPart = Math.round((num - integerPart) * 100);
      if (decimalPart > 0) {
        const jiao = Math.floor(decimalPart / 10);
        const fen = decimalPart % 10;
        
        if (jiao > 0) {
          str += digits[jiao] + '角';
        } else if (hasValue) {
          str += '零';
        }
        
        if (fen > 0) {
          str += digits[fen] + '分';
        }
      } else {
        str += '';
      }
      
      return str;
    }

    function convertToUpper() {
      const amount = parseInt(amountInput.value) || 0;
      amountUpper.textContent = numberToChinese(amount);
    }

    function getTotalPages() {
      let filteredEntries = entries;
      if (searchTerm) {
        filteredEntries = entries.filter(entry => 
          entry.name.toLowerCase().includes(searchTerm)
        );
      }
      return Math.ceil(filteredEntries.length / entriesPerPage);
    }

    function renderPagination() {
      const totalPages = getTotalPages();
      
      if (totalPages <= 1) {
        pagination.classList.add('hidden');
        return;
      }
      
      pagination.classList.remove('hidden');
      pagination.innerHTML = '';
      
      const prevBtn = document.createElement('button');
      prevBtn.className = 'px-3 py-1 border border-accent/30 rounded hover:bg-accent/5 transition-colors';
      prevBtn.innerHTML = '<i class="fa fa-chevron-left"></i>';
      prevBtn.disabled = currentPage === 1;
      prevBtn.addEventListener('click', () => {
        if (currentPage > 1) {
          currentPage--;
          renderEntries();
        }
      });
      pagination.appendChild(prevBtn);
      
      for (let i = 1; i <= totalPages; i++) {
        const pageBtn = document.createElement('button');
        pageBtn.className = `px-3 py-1 rounded ${currentPage === i ? 'bg-accent text-white' : 'border border-accent/30 hover:bg-accent/5'} transition-colors`;
        pageBtn.textContent = i;
        pageBtn.addEventListener('click', () => {
          currentPage = i;
          renderEntries();
        });
        pagination.appendChild(pageBtn);
      }
      
      const nextBtn = document.createElement('button');
      nextBtn.className = 'px-3 py-1 border border-accent/30 rounded hover:bg-accent/5 transition-colors';
      nextBtn.innerHTML = '<i class="fa fa-chevron-right"></i>';
      nextBtn.disabled = currentPage === totalPages;
      nextBtn.addEventListener('click', () => {
        if (currentPage < totalPages) {
          currentPage++;
          renderEntries();
        }
      });
      pagination.appendChild(nextBtn);
    }

    function renderEntries() {
      entriesList.innerHTML = '';
      
      let filteredEntries = entries;
      if (searchTerm) {
        filteredEntries = entries.filter(entry => 
          entry.name.toLowerCase().includes(searchTerm)
        );
      }
      
      if (filteredEntries.length === 0) {
        entriesList.innerHTML = `
          <div class="col-span-15 flex items-center justify-center py-8 text-center text-ink/60 bg-white/90">
            ${searchTerm ? '没有找到匹配的记录' : '暂无记录，请点击右侧"添加"按钮开始'}
          </div>
        `;
        renderPagination();
        return;
      }
      
      const startIndex = (currentPage - 1) * entriesPerPage;
      const endIndex = Math.min(startIndex + entriesPerPage, filteredEntries.length);
      const pageEntries = filteredEntries.slice(startIndex, endIndex);
      
      const verticalContainer = document.createElement('div');
      verticalContainer.className = 'col-span-15 grid grid-cols-10 gap-px';
      
      pageEntries.forEach((entry, index) => {
        const amountValue = parseInt(entry.amount) || 0;
        const amountUpper = numberToChinese(amountValue);
        
        const colBgColor = index % 2 === 0 ? 'bg-white/90' : 'bg-white/70';
        
        const item = document.createElement('div');
        item.className = `col-span-1 flex flex-col ${colBgColor} entry-item`;
        item.dataset.id = entry.id;
        
        item.innerHTML = `
          <div class="p-2 border-b border-accent/20 entry-name">
            <div class="text-center font-classic text-lg" style="writing-mode: vertical-rl;text-align: center;white-space: nowrap;font-family: ${nameFont};font-size: 40px;">${entry.name}</div>
          </div>
          <div class="p-2 border-b border-accent/20 entry-gift">
            <div class="text-center font-calligraphy text-accent" style="writing-mode: vertical-rl;text-align: center;white-space: nowrap;font-size: 40px;">贺礼</div>
          </div>
          <div class="p-2 border-b border-accent/20 entry-amount">
            <div class="text-center font-classic" style="writing-mode: vertical-rl;text-align: center;white-space: nowrap;font-family: ${amountFont};font-size: 40px;">${amountUpper}</div>
            <div style="font-family: ${amountFont};font-size: 20px;padding-top:10px;">${amountValue}</div>
          </div>
          <div class="hidden-buttons p-1 flex justify-center bg-accent/5 entry-actions">
            <button class="edit-btn px-2 py-1 text-xs bg-accent/10 text-accent rounded hover:bg-accent/20 transition-colors" title="编辑">
              <i class="fa fa-pencil mr-1"></i>编辑
            </button>
            <button class="delete-btn px-2 py-1 text-xs bg-red-100 text-red-600 rounded hover:bg-red-200 transition-colors ml-2" title="删除">
              <i class="fa fa-trash mr-1"></i>删除
            </button>
          </div>
        `;
        
        verticalContainer.appendChild(item);
        
        item.querySelector('.edit-btn').addEventListener('click', () => editEntry(entry.id));
        item.querySelector('.delete-btn').addEventListener('click', () => confirmDeleteEntry(entry.id));
      });
      
      entriesList.appendChild(verticalContainer);
      renderPagination();
    }

    function updateTotals() {
      const totalAmount = entries.reduce((sum, entry) => sum + parseInt(entry.amount || 0), 0);
      const totalGuests = entries.length;
      
      let maxAmount = 0;
      let minAmount = 0;
      let averageAmount = 0;
      
      if (totalGuests > 0) {
        const amounts = entries.map(entry => parseInt(entry.amount || 0));
        
        maxAmount = Math.max(...amounts);
        minAmount = Math.min(...amounts);
        averageAmount = Math.round(totalAmount / totalGuests);
      }
      
      document.getElementById('totalGuests').textContent = totalGuests;
      document.getElementById('totalAmountUpper').textContent = numberToChinese(totalAmount);
      
      if (document.getElementById('maxAmount')) {
        document.getElementById('maxAmount').textContent = numberToChinese(maxAmount);
      }
      if (document.getElementById('minAmount')) {
        document.getElementById('minAmount').textContent = numberToChinese(minAmount);
      }
      if (document.getElementById('averageAmount')) {
        document.getElementById('averageAmount').textContent = numberToChinese(averageAmount);
      }
      if (document.getElementById('totalAmountNumber')) {
        document.getElementById('totalAmountNumber').textContent = totalAmount.toLocaleString() + ' 元';
      }
      if (document.getElementById('maxAmountNumber')) {
        document.getElementById('maxAmountNumber').textContent = maxAmount.toLocaleString() + ' 元';
      }
      if (document.getElementById('minAmountNumber')) {
        document.getElementById('minAmountNumber').textContent = minAmount.toLocaleString() + ' 元';
      }
      if (document.getElementById('averageAmountNumber')) {
        document.getElementById('averageAmountNumber').textContent = averageAmount.toLocaleString() + ' 元';
      }
    }

    function openEntryModal() {
      document.getElementById('entryId').value = '';
      entryForm.reset();
      amountUpper.textContent = '零元';
      entryModal.classList.remove('hidden');
      document.getElementById('guestName').focus();
    }

    function openSettingsModal() {
      nameFontSelect.value = nameFont;
      amountFontSelect.value = amountFont;
      settingsModal.classList.remove('hidden');
    }

    function closeEntryModal() {
      entryModal.classList.add('hidden');
    }

    function closeSettingsModalFunc() {
      settingsModal.classList.add('hidden');
    }

    function saveEntry(e) {
      e.preventDefault();
      
      const id = document.getElementById('entryId').value;
      const name = document.getElementById('guestName').value;
      const amount = document.getElementById('amount').value;
      
      if (id) {
        const index = entries.findIndex(entry => entry.id === id);
        if (index !== -1) {
          entries[index] = { ...entries[index], name, amount };
        }
      } else {
        entries.push({
          id: currentId.toString(),
          name,
          amount,
          date: new Date().toISOString()
        });
        currentId++;
        localStorage.setItem('currentEntryId', currentId);
      }
      
      localStorage.setItem('weddingEntries', JSON.stringify(entries));
      
      renderEntries();
      updateTotals();
      closeEntryModal();
      
      showAlert(id ? '记录已更新' : '记录已添加', '操作成功');
    }

    function editEntry(id) {
      const entry = entries.find(entry => entry.id === id);
      if (entry) {
        document.getElementById('entryId').value = entry.id;
        document.getElementById('guestName').value = entry.name;
        document.getElementById('amount').value = entry.amount;
        convertToUpper();
        
        entryModal.classList.remove('hidden');
        document.getElementById('guestName').focus();
      }
    }

    function confirmDeleteEntry(id) {
      currentConfirmAction = () => deleteEntry(id);
      document.getElementById('confirmTitle').textContent = '确认删除';
      document.getElementById('confirmMessage').textContent = '确定要删除这条记录吗？此操作不可撤销。';
      confirmModal.classList.remove('hidden');
    }

    function deleteEntry(id) {
      entries = entries.filter(entry => entry.id !== id);
      localStorage.setItem('weddingEntries', JSON.stringify(entries));
      
      if (entries.length > 0 && (currentPage - 1) * entriesPerPage >= entries.length) {
        currentPage--;
      }
      
      renderEntries();
      updateTotals();
      
      showAlert('记录已删除', '删除成功');
    }

    function saveWeddingSettings() {
      const groom = groomInput.value;
      const bride = brideInput.value;
      const date = dateInput.value;
      const venue = venueInput.value;
      
      nameFont = nameFontSelect.value;
      amountFont = amountFontSelect.value;
      
      coupleNames.textContent = `${groom} & ${bride} 新婚之喜`;
      weddingInfo.textContent = `公元${date} 于${venue}`;
      
      const settings = {
        groom,
        bride,
        date,
        venue,
        nameFont,
        amountFont
      };
      localStorage.setItem('weddingSettings', JSON.stringify(settings));
      
      renderEntries();
      
      showAlert('设置已保存', '保存成功');
      closeSettingsModalFunc();
    }

    function loadWeddingSettings() {
      const settings = JSON.parse(localStorage.getItem('weddingSettings'));
      if (settings) {
        groomInput.value = settings.groom || '张明';
        brideInput.value = settings.bride || '李华';
        dateInput.value = settings.date || '二零二三年十月一日';
        venueInput.value = settings.venue || '福满楼大酒店';
        
        if (settings.nameFont) {
          nameFont = settings.nameFont;
        }
        if (settings.amountFont) {
          amountFont = settings.amountFont;
        }
        
        coupleNames.textContent = `${settings.groom || '张明'} & ${settings.bride || '李华'} 新婚之喜`;
        weddingInfo.textContent = `公元${settings.date || '二零二三年十月一日'} 于${settings.venue || '福满楼大酒店'}`;
      }
    }

    function showAlert(message, title = '提示') {
      document.getElementById('alertTitle').textContent = title;
      document.getElementById('alertMessage').textContent = message;
      alertModal.classList.remove('hidden');
    }

    function closeAlertModal() {
      alertModal.classList.add('hidden');
    }

    function closeConfirmModal() {
      confirmModal.classList.add('hidden');
      currentConfirmAction = null;
    }

    function executeConfirmAction() {
      if (currentConfirmAction) {
        currentConfirmAction();
        closeConfirmModal();
      }
    }

    const style = document.createElement('style');
    style.textContent = `
      @media print {
        .fixed, #entryModal, #settingsModal, #confirmModal, #alertModal {
          display: none !important;
        }
        .book-right, .book-container {
          width: 100% !important;
          height: auto !important;
          box-shadow: none !important;
          background: white !important;
        }
        body {
          background: white !important;
        }
        .page-break {
          page-break-after: always;
        }
        @page {
          margin: 2cm;
        }
      }
    `;
    document.head.appendChild(style);
  </script>
</body>
</html>